<%@ page contentType="text/html" pageEncoding="UTF-8" session="false"%>
<%@taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="vdab" uri="http://vdab.be/tags" %>
<c:set var="contextPath" value="${pageContext.servletContext.contextPath }"/>
<!doctype html>
<html lang="nl">
  <head>
    <title>Frituur Frida - sausen</title>
    <link rel="stylesheet" href="${contextPath}/styles/default.css"/>
  </head>
  <body>
  	<vdab:menu/>
    <c:set var="contextPath" value="${pageContext.servletContext.contextPath}"/>
    <h1>Sauzen</h1>
    <c:url value="/sauzen/verwijderen.htm" var="url"/>
    <form method="post" action="${url}" id="verwijderform">
      <c:forEach var="saus" items="${sauzen}">
      	<h2>
          <label>
            <input type="checkbox" name="nummer" value="${saus.nummer}"/>
            ${saus.naam}
          </label>
        </h2>
        <img src="${contextPath}/images/${saus.naam}.jpg" alt="${saus.naam}"/>
        ingrediënten:
        <c:forEach var="ingredient" items="${saus.ingredienten}"
          varStatus="status">
          ${ingredient}<c:if test="${not status.last}">, </c:if>
        </c:forEach>
      </c:forEach>
      <div><input type="submit" value="Aangevinkte sausen verwijderen"
             id="verwijderknop"/></div>
    </form>
     <script>
      document.getelementById('verwijderform').onsubmit = function() {
          document.getElementById('verwijderknop').disabled = true;
      };
    </script>
  </body>
</html>